<template>
  <div class="reports">
    <div class="el-row">
      <el-col :span="24">
        <div class="left">
          <el-input
            clearable
            v-model="search"
            placeholder="请输入关键词"
            @keyup.enter.native="handleSearch"
            style="width: 360px;">
          </el-input>
          <el-button
            type="primary"
            :disabled="searchBtnLoading"
            :loading="searchBtnLoading"
            @click="handleSearch">
            搜索
          </el-button>
        </div>
        <div class="right">
          <router-link :to="{name: 'NpsReportsOrdersList'}">
            <el-button type="primary">新增报表</el-button>
          </router-link>
        </div>
      </el-col>
    </div>
    <div class="el-row" style="margin-top: 30px;">
      <el-col :span="24">
        <el-table
          stripe
          v-loading="tbLoading"
          element-loading-text="拼命加载中"
          :data="tbData">
          <el-table-column label="报表名称" prop="reportName" align="center"></el-table-column>
          <el-table-column label="报表生成时间" prop="updateTime" align="center" :formatter="formatDate"></el-table-column>
          <el-table-column label="报表数据统计时间" prop="reportDataStatisticsTime" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="toReportDetailsView(scope.row)">查看</el-button>
              <el-button v-if="scope.row.operation == 0" type="text" @click="handleEditReport(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            :current-page.sync="paging.pageIndex"
            :page-size.sync="paging.pageSize"
            layout="sizes, total, prev, pager, next, jumper"
            :total.sync="tbPage.total"
            :page-sizes="[10, 30, 50, 100]"
            @current-change="pageIndexChange"
            @size-change="pageSizeChange">
          </el-pagination>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>

  import {
    getNpsReports
  } from "@/service/getData";

  export default {
    data() {
      return {
        search: '',
        searchBtnLoading: false,
        tbLoading: false,
        reportsData: {
          list: [],
          page: {}
        },
        paging: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    computed: {
      tbData() {
        return this.reportsData.list
      },
      tbPage() {
        return this.reportsData.page
      }
    },
    created() {
      this.getNpsReports()
    },
    methods: {
      // 获取报表列表
      getNpsReports() {
        this.tbLoading = true
        this.searchBtnLoading = true
        getNpsReports({
          page: this.paging.pageIndex,
          size: this.paging.pageSize,
          condition: this.search
        }).then(res => {
          this.reportsData = res.data.data
        }).catch(err => {

        }).finally(() => {
          this.tbLoading = false
          this.searchBtnLoading = false
        })
      },

      // 搜索
      handleSearch() {
        this.paging.pageIndex = 1
        this.getNpsReports()
      },

      // 编辑报表
      handleEditReport(row) {
        this.$router.push({
          name: 'NpsReportsOrdersList',
          query: {
            id: row.id.toString(),
            t1: row.callOutBeginTime,
            t2: row.callOutEndTime
          }
        })
      },

      // 跳转报表详情
      toReportDetailsView(row) {
        this.$router.push({
          name: 'NpsReportDetails',
          params: {
            id: row.id
          }
        })
      },

      // 当前页改变
      pageIndexChange(value) {
        this.paging.pageIndex = value
        this.getNpsReports()
      },

      // 页面容量改变
      pageSizeChange(value) {
        this.paging.pageIndex = 1
        this.paging.pageSize = value
        this.getNpsReports()
      },

      // 日期格式化
      formatDate(row) {
        return this.$date.format(new Date(row.createTime), 'YYYY-MM-DD HH:mm:ss')
      }

    }
  }
</script>

<style lang="scss" scoped>

  .clearfix:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }

  .left {
    float: left;
  }

  .right {
    float: right;
  }

</style>
